<script>
Highcharts.setOptions({
  global: {
    timezoneOffset: 8,
    useUTC: false
  },
});

/**
 * cb function(elem, i)
 */
function scrollLoad(arr, cb) {

  var num = arr.length;
  var screenHeight = document.documentElement.clientHeight;
  var loaded = 0;

  function load(i) {
    if (loaded === num)
      window.onscroll = null;

    else if (arr[i].getAttribute('data-flag') == 'loaded')
      return;
    else {
      cb(arr[i], i);
      arr[i].setAttribute('data-flag', 'loaded');
      loaded++;
    }
  }

  function scroll() {
    var screenTop = window.scrollY;

    var screenBottom = screenTop + document.documentElement.clientHeight;

    for (var i = 0; i < arr.length; i++) {
      var eleOffsetTop = arr[i].offsetTop;
      if (eleOffsetTop === 0)
        eleOffsetTop = arr[i].parentNode.offsetTop;
      if (eleOffsetTop > screenTop && eleOffsetTop < screenBottom) {
        load(i);
      }
    }
  }

  window.onscroll = function() {
    scroll();
  }

  scroll();
}

function draw(id, ohlc, macd) {
  new Highcharts.StockChart({
    rangeSelector: false,
    chart: {
      renderTo: id
    },
    yAxis: [{
      labels: {
        align: "right",
        x: -3
      },
      height: "70%",
      tickPixelInterval: 30
    }, {
      labels: {
        align: "right",
        x: -3
      },
      top: "75%",
      height: "25%",
      tickPixelInterval: 20
    }],
    credits: false,
    navigator: false,
    scrollbar: false,
    plotOptions: {
      /*修改蜡烛颜色 */
      candlestick: {
        color: "#00ff00",
        upColor: "#ff0000",
        lineColor: "#00ff00",
        upLineColor: "#ff0000",
        maker: {
          states: {
            hover: {
              enabled: false,
            }
          }
        },
        pointWidth:10
      },
      column: {
        pointWidth: 5
      },
      /*去掉曲线和蜡烛上的hover事件 */
      series: {
        animation:false,
        states: {
          hover: {
            enabled: false
          }
        },
        line: {
          marker: {
            enabled: false
          }
        }
      }
    },
    series: [{
      type: "candlestick",
      data: ohlc
    }, {
      type: "column",
      data: macd,
      yAxis: 1
    }]
  });
}

var arr = [], elems = [];
function c(id, ohlc, macd) {
  arr.push({
    ohlc: ohlc,
    macd: macd
  });
  elems.push(document.getElementById(id));
}

</script>
<style>
html,
body {
  margin: 0;
  padding: 0;
}

table {
  width: 100%;
  border-left: 1px solid #dcdcdc;
}

table th,
table td {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
}
</style>
</head>

<body>
  <table cellpadding="0" cellspacing="0" style="position:fixed; height:30px;z-index:1;background-color:#fff;">
    <tr>
      <th width="10%">s</th>
      <th width="10%">mdup</th>
      <th width="10%">md2up</th>
      <th width="10%">mwup</th>
      <th width="10%">mw2up</th>
      <th width="10%">c</th>
      <th width="40%">k</th>
    </tr>
  </table>
